<template>
  <!-- 头部 -->
  <header class="open" ref="header_ref">
    <router-link to="/">
      <div class="logo">假城科技</div>
    </router-link>
    <!-- 导航 -->
    <nav>
      <!-- <a href="#home">首页</a>
      <a href="#about-us" v-smooth-scroll>关于我们</a>
      <a href="#company-activities" v-smooth-scroll>公司动态</a> -->

      <router-link to="/">
        <span>首页</span>
      </router-link>
      <router-link to="/qq">
        <span>产品详情</span>
      </router-link>
      <router-link to="/skrollr">
        <span>介绍详情</span>
      </router-link>
      <i class="fas fa-search"></i>
    </nav>
    <!-- 折叠导航按钮 -->
    <div class="burger">
      <div class="burger-line1"></div>
      <div class="burger-line2"></div>
      <div class="burger-line3"></div>
    </div>
  </header>
</template>

<script>
export default {
  props: [],
  data() {
    return {};
  },
  mounted() {
    // 折叠菜单打开时，如果点击了链接，则自动关闭全屏导航
    const headerEl = this.$refs.header_ref;

    const fn = () => {
      // 固定导航
      let height = headerEl.getBoundingClientRect().height;

      if (window.pageYOffset - height > 800) {
        if (!headerEl.classList.contains("sticky")) {
          headerEl.classList.add("sticky");
        }
      } else {
        headerEl.classList.remove("sticky");
      }
    };

    document.addEventListener("scroll", fn);
    this.$once("hook:beforeDestroy", () => {
      window.removeEventListener("scroll", fn);
    });

    /* ***** 响应式**** */

    // // 折叠按钮
    // const burgerEl = document.querySelector(".burger");
    // // const nav = document.querySelector("header nav");
    // burgerEl.addEventListener("click", () => {
    //   headerEl.classList.toggle("open");
    // });

    // // 折叠菜单打开时，如果点击了链接，则自动关闭全屏导航
    // document.addEventListener("scrollStart", () => {
    //   if (headerEl.classList.contains("open")) {
    //     headerEl.classList.remove("open");
    //   }
    // });
  }
};
</script>

<style lang="scss" scoped>
@import "@/scss/_variables.scss";
/* ============= 头部================== */

// 去除 router-link默认下划线样式
.router-link-active {
  text-decoration: none;
}
/* 头部 */
header {
  position: absolute;
  z-index: 200;
  display: grid;
  align-items: center;
  padding: 0 40px;
  width: 100vw;
  height: 80px;
  /* 两列，一列占三分之一，一列占三分之二 */

  grid-template-columns: 1fr 2fr;
}

/* logo */
.logo {
  color: $text-color-lightest;
  text-decoration: none;
  font-weight: 600;
  font-size: 24px;
}

/* 导航 */
header nav {
  /* 水平靠右对齐 */
  justify-self: end;
}

/* 导航链接 */
header nav a {
  position: relative;
  margin: 0 24px;
  border: none;
  color: $text-color-lightest;
  text-decoration: none;
  transition: all 300ms;
}

// header nav .router-link-active {
//   position: relative;
//   margin: 0 24px;
//   border: none;
//   color: $text-color-lightest;
//   text-decoration: none;
//   transition: all 300ms;
// }
//  border方式
header nav a:hover {
  padding-bottom: 10px;
  border-bottom: 2px solid $primary-color;
  color: $primary-color;
}

// 伪类方式 :hover  after
// header nav a:hover:before {
//   position: absolute;
//   bottom: -10px;
//   left: 0;
//   width: 100%;
//   height: 2px;
//   background-color: $primary-color;
//   content: "";
//   transform-origin: 50% 0%;
// }

/* 搜索图标 */
header nav i {
  margin-left: 30px;
  color: $text-color-lightest;
}
/* 折叠菜单 */
header .burger {
  display: none;
}

/* 页面下滑时固定导航，背景设置为白色 */
header.sticky {
  position: fixed;
  background-color: white;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
  animation: dropDown 0.5s ease-in-out forwards;
}

/* 固定导航文字颜色为黑色 */
header.sticky .logo,
header.sticky nav a,
header.sticky nav i {
  color: $text-color-darker;
}

/* 固定导航下滑动画 */
@keyframes dropDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}

// 自适应

/* 自适应，小于1100象素时 */
@media (max-width: 1100px) {
  /* 导航设置为不可见，点击折叠按钮显示全屏导航 */
  header nav {
    display: none;
  }
}

/* 响应式设置 由大到小 */
/* 小于992象素时 */
@media (max-width: 992px) {
}

/* 小于768象素时 */
@media (max-width: 768px) {
}

/* 小于576象素 */
@media (max-width: 576px) {
}

// /* 响应式设置 由大到小 */

// @media (max-width: 1100px) {

// }
// /* 小于992象素时 */
// @media (max-width: 992px) {
// }

// /* 小于768象素时 */
// @media (max-width: 768px) {
// }

// /* 小于576象素 */
// @media (max-width: 576px) {
// }
</style>
